<template>
	<view class="tabbar-container" :style="$utils.disposeSafeBottomFun()">
		<block>
			<view class="tabbar-item" v-for="(item, index) in tabbarList"
				:class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)">
				<view class="item-top">
					<image :src="currentPage == item.id ? item.selectIcon : item.icon"></image>
				</view>
				<view class="item-bottom" :class="[currentPage == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "qms-tabbar",
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabbarList: [{
						id: 0,
						path: '/st_qms/index/index',
						icon: '/static/tabbar-icons/Index.png',
						selectIcon: '/static/tabbar-icons/Index_Check.png',
						text: '首页',
						centerItem: false
					},
					{
						id: 1,
						path: '/st_qms/control/control',
						icon: '/static/tabbar-icons/control.png',
						selectIcon: '/static/tabbar-icons/controlCheck.png',
						text: '智控',
						centerItem: false
					},
					{
						id: 4,
						path: '',
						icon: '/static/tabbar-icons/add-white.png',
						selectIcon: '/static/tabbar-icons/add-white.png',
						text: '',
						centerItem: true
					},
					{
						id: 2,
						path: '/st_qms/shop/shop',
						icon: '/static/tabbar-icons/stats.png',
						selectIcon: '/static/tabbar-icons/statsCheck.png',
						text: '商城',
						centerItem: false
					},
					{
						id: 3,
						path: '/st_qms/Mine/mine',
						icon: '/static/tabbar-icons/me.png',
						selectIcon: '/static/tabbar-icons/me_Check.png',
						text: '我的',
						centerItem: false
					}
				],
				lastCallCom: 0
			};
		},
		mounted() {
			uni.hideTabBar();
		},
		methods: {
			changeItem(item) {
				let that = this;
				if (that.$utils.isEmpty(that.$store.state.appConfigInfo.Authorization_Info) ||
					!that.$store.state.appConfigInfo.Authorization_Info.Authorization) {
					return uni.showToast({
						title: '本机未授权 请前往授权',
						icon: 'none'
					});
				}

				if (item.id === 4) {
					const throttle = (fn, delay = 1000) => {
						const now = Date.now();
						if (now - that.lastCallCom < delay) return;
						that.lastCallCom = now;
						fn();
					};

					throttle(() => {
						that.$emit("change", item);
					});
				} else {
					that.$emit("change", item);
				}
			}
		}
	}
</script>

<style>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		/* height: 60px; */
		box-shadow: 0 0 9px -5px #999;
		display: flex;
		align-items: center;
		padding: 5px 0;
		color: #999999;
		background-color: #fff;
	}

	.tabbar-container .tabbar-item {
		width: 20%;
		height: 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .item-active {
		/* color: #4cbbff; */
		color: #51d0d0;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 40px;
		height: 40px;
		padding: 10px;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 70px;
		height: 70px;
		position: absolute;
		top: -30px;
		/* left: calc(50% - 50px); */
		left: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
		box-shadow: 0px -6px 9px -10px #999;
		background-color: #ffffff;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 100%;
		height: 100%;
	}

	.tabbar-container .tabbar-item .item-bottom {
		font-size: 14px;
		width: 100%;
	}

	.tabbar-container .center-item .item-top image {
		/* background-color: #4cbbff; */
		background-color: #51d0d0;
		border-radius: 50%;
		padding: 4px;
	}


	.tabbar-container .center-item .item-bottom {
		position: absolute;
		bottom: 5px;
	}
</style>